<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <!-- 顶部导航 -->
      <el-header class="layout-header">
        <Header />
      </el-header>

      <!-- 主体内容 -->
      <el-container class="main-container">
        <!-- 侧边栏 -->
        <el-aside
          :width="isCollapse ? '64px' : '200px'"
          class="layout-aside"
        >
          <Aside :collapse="isCollapse" @toggle-collapse="toggleCollapse" />
        </el-aside>

        <!-- 内容区域 -->
        <el-main class="layout-main">
          <div class="content-wrapper">
            <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Header from '@/components/Header.vue'
import Aside from '@/components/Aside.vue'
import { getCurrentUser, isAdmin } from '@/utils/auth'

const router = useRouter()
const route = useRoute()

// 侧边栏折叠状态
const isCollapse = ref(false)

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 组件挂载时检查路由重定向
onMounted(() => {
  // 如果当前路径是 /home，根据用户角色进行重定向
  if (route.path === '/home') {
    const user = getCurrentUser()
    if (user) {
      const redirectPath = isAdmin() ? '/home/alluser' : '/home/rest'
      router.replace(redirectPath)
    } else {
      // 如果没有用户信息，重定向到登录页
      router.replace('/login')
    }
  }
})
</script>

<style lang="less" scoped>
.common-layout {
  height: 100vh;
  background: #f0f2f5;
}

.layout-container {
  height: 100%;
}

.layout-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 64px;
  line-height: 64px;
  z-index: 1000;
  position: relative;
}

.main-container {
  height: calc(100vh - 64px);
}

.layout-aside {
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
  overflow: hidden;
  z-index: 999;

  :deep(.el-menu) {
    border-right: none;
  }
}

.layout-main {
  background: #f0f2f5;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  padding: 16px;
  overflow: auto;

  // 自定义滚动条
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

// 页面切换动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s ease;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 响应式设计
@media (max-width: 768px) {
  .layout-aside {
    position: fixed;
    left: 0;
    top: 64px;
    height: calc(100vh - 64px);
    z-index: 1001;

    &.collapsed {
      left: -200px;
    }
  }

  .layout-main {
    margin-left: 0;
  }

  .content-wrapper {
    padding: 8px;
  }
}
</style>
